<template>
	<view>
		<view style="height: 200rpx; width: 100%;"></view>
		<view class="tab-nav">
			<view class="tabbar acea-row row-middle row-around">
				<view class="item acea-row row-middle row-column row-center" :class="item.path==path?'on':''"
				v-for="(item,index) in list" :key="index" @click.stop="pathClick(item.path)">
					<image class="icon" :src="item.path==path?item.selicon:item.icon" mode="aspectFit"></image>
					<text class="title" :class="item.path==path?'on':''">{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			path:{
				type: String,
				value: '/pages/newIndex/index',
			}
		},
		data() {
			return {
				list:[
					{
						icon:'https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/tabbar02.png',
						selicon:'https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/tabbar01.png',
						title:'首页',
						path:'/pages/newIndex/index'
					},
					{
						icon:'https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/tabbar04.png',
						selicon:'https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/tabbar03.png',
						title:'管家',
						path:'/pages/house/index'
					},
					{
						icon:'https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/tabbar06.png',
						selicon:'https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/tabbar05.png',
						title:'我的',
						path:'/pages/user/user'
					},
				],
				
			};
		},
		methods:{
			pathClick(url){
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab-nav{
		width: 750rpx;
		padding: 30rpx;
		// background-color: #ffffff !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.tabbar{
		width: 690rpx;
		height: 186rpx;
		background-color: #ffffff;
		border-radius: 68rpx;
		box-shadow: 2px 2px 10px 0px rgba(247, 118, 0, 0.2);
		margin: 0 auto;
		
		.item{
			width: 120rpx;
			height: 132rpx;
			border-radius: 50rpx;
			
			&.on{
				background: #FD7D36;
			}
			
			.icon{
				width: 60rpx;
				height: 60rpx;
			}
			.title{
				font-size: 26rpx;
				color: #666666;
				margin-top: 10rpx;
				
				&.on{
					color: #ffffff;
				}
			}
		}
		
	}
</style>
